<template>
    <div class="content">
        <div>
            <h1  class="title">在线充值</h1>
            <div class="layui-tab">
                <ul class="layui-tab-title">
                    <li v-for="(item) of payment" 
                        :key="item.id" 
                        :class="{'layui-this':item.pay_code==pay_this}"
                        @click='payClick(item.pay_code)'
                    >{{item.pay_name}}</li>
                </ul>
                <div>
                    <form class="layui-form" >
                        <div class="layui-form-item">
                            <label class="layui-form-label">输入金额：</label>
                            <div class="layui-input-inline">
                            <input type="text" name="password" required lay-verify="required" placeholder="请输入金额" autocomplete="off" class="layui-input">
                            </div>
                            <div class="layui-form-mid layui-word-aux">请输入正确的金额,最多可保留两位小数</div>
                        </div> 
                        <div class="select-charge">
                            <v-select 
                                placeholder="请选择购买时间"
                                class='p-margin'
                                v-model="selected" 
                                label="charge_name"
                                :options="goodsInfo"
                                @input="setActivePerson" 
                            >
                                <span slot="no-options">
                                Whoops! Nothing here.
                                </span>
                            </v-select>
                            <div class="price">{{price}}</div>
                        </div>
                        <a class="layui-btn  p-margin" @click="buttonClick">确认充值</a>
                    </form>
                </div>
            </div>
        </div>
    </div> 
</template> 
<script>
export default {
    name:'Content',
    data(){
        return {
            payment :[{
                pay_name:'支付宝',
                pay_code:'alpay'
            },{
                pay_name:'微信', 
                pay_code:'wxpay'
            }],
            price:0,
            pay_this:'alpay',//默认支付方式
            goodsInfo:[],
            selected:'请选择购买时间',
            userInfo:false
        } 
    },
    methods:{
        payClick:function(e){
            this.$data.pay_this = e
        },
        buttonClick:function(){
            // console.log(this.$data.selected.value);
            if(!this.$data.userInfo){
                this.$alert.danger({ message: '请先登陆' })
                return 
            }
            var pay_this = this.pay_this
            var payobj = this.selected
            if(!pay_this){ //没有支付方式
                return 
            }
            if(!payobj || !payobj.charge_id){ //没有选择购买规则
                this.$alert.danger({ message: '请选择购买时间' })
                return 
            }
            var data = {
                id : this.$data.userInfo.id,
                pay_name: pay_this,
                payobj: payobj
            }
            console.log(data);
            //生成订单
            this.bus.$emit('changeIsShow',true);//开启loading
            this.$axios({
                url: request_url+'Order-addOrder',
                method: 'post',
                data: this.$qsstr(data)
            }).then((e)=>{
                this.bus.$emit('changeIsShow',false);//关闭loading
                // console.log(e);
                var res = e.data;
                if(res.code == 1 && res.data > 0){
                    window.open(request_url+'Order-payment?order_id='+res.data); //跳转支付
                    // window.location.href = (request_url+'Order-payment?order_id='+res.data); 
                }else{
                    this.$alert.danger({ message: '订单生成失败' })
                }
            })

        },
        setActivePerson(re){//下拉框改变
            // console.log(re);
            this.$data.price = re ? re.price : ''
        },
        getHomeInfo (){//获取
        
            this.$axios.get(request_url+'Recharge-getlist').then(this.getHomeInfoSucc)
        }, 
        getHomeInfoSucc(e){//获取回调
            if(e.data.code == 1){
                this.$data.goodsInfo =  e.data.data
            }
        }
       
    },
    mounted(){
        this.getHomeInfo()//获取
        //是否登陆
        this.$axios.get(request_url+'?c=user&a=check').then((e)=>{
            // console.log(e.data);
            if(e.data.code == 200){
                this.$data.userInfo = e.data.obj
            }else{
                this.$data.userInfo = false
            }
        })
        //模拟登陆
        // this.$axios.post(request_url+'?c=user&a=login',this.$qsstr({
        //     password: '123456',
        //     username: 'test@qq.com'
        // })).then(function (response) {
        //     console.log(response);
        // });
        //------------------------------------

        setTimeout(() => {
            
            this.bus.$emit('changeIsShow',false);
        }, 10);
    }

}
</script>

<style lang="stylus" scoped>
    .p-margin
        margin : 10px 0 10px 5px  ;    
    .content
        background: #fff;
        width : 1000px;
        margin: 15px auto;
        padding: 15px;    
        
        .title 
            font-size: 38px;
        .layui-form
            margin-top: 20px;
            .layui-input-block
                width : 20%
        .dropdown
            width: 30%;    
        .select-charge    
            display:flex;
            .price
                // height: 100%
                display :flex
                align-items:center
                position relative
                margin-left -100px
                z-index 1

</style>